<template>
    <div class="list">
        <div class="item" v-for="goods in goodslist" :key="goods.id">
            <div class="item-l">
                <img class="item-img" :src="goods.src">
            </div>
            <div class="item-r">
                <div class="item-title">{{goods.title}}</div>
                <div class="item-price">{{goods.price | currency}}</div>
                <div class="item-opt">
                    <button @click="add(goods)">加入购物车</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import  { mapState, mapActions } from 'vuex'
export default {
    computed: mapState({
        goodslist: state => state.goods.list
    }),
    methods: mapActions('shopcart', ['add']),
    created (){
        this.$store.dispatch('goods/getList')
    },
    filters: {
        currency (value) {
            return '￥' + value
        }
    }
}
</script>
<style scoped>
    .item{
        display: flex;
        border-bottom: 1px dashed blueviolet;
    }
    .item-l{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item-r{
        flex: 1;     
    }
    .item-title{
        margin-top: 20px;
    }
    .item-price{
        margin-top: 10px;
        color: red;
        font-weight: 800px;
    }
    .item-opt{
        margin-top: 10xp;
    }
    .item-opt>button{
        background-color: red;
        color:white;
        border: 0;
    }
</style>